<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html  lang="en">
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="json2.js"></script>
  <style>
  table,td{
    border:1px solid gray;
  }
  </style>
  <script>
     var t=0;
	 var color_arr=['red','yellow','green','blue'];
      var num
	 function initTable(){
	    $("#container").html('');
		var table=$("<table></table>");
		   num=Math.pow(2,parseInt($("#txt_k").val()));
		var width=document.body.clientWidth*0.4/num;
		for(var i=0;i<num;i++){
		   var tr=$("<tr style='width:"+width*num+"px;height:"+width+"px;'></tr>");
		   for(var j=0;j<num;j++){
		     var td=$("<td style='width:"+width+"px;height:"+width+"px;'> </td>");
		     var a = $("<img alt='' src='img/back.png' style='width:"+width+"px;height:"+width+"px;'>");
			 td.append(a);
			 /* if(i==parseInt($("#txt_x").val())-1&&j==parseInt($("#txt_y").val())-1){
				 var a = $("<img alt='' src='img/mouse.png' style='width:"+width+"px;height:"+width+"px;'>");
				 td.append(a);
			    td.css("background-color","red");
			 } */
			 tr.append(td);
		   }
		   table.append(tr);
		}
		 $("#container").append(table);
	 }

	 function calcTable(){
	    var dr=parseInt($("#txt_x").val())-1;
		var dc=parseInt($("#txt_y").val())-1;
	    chessBoard(0,0,dr,dc,num);
	 }
   
	 //tr tc子棋盘左上角坐标 dr dc特殊格子坐标 size子棋盘格子数
	 function chessBoard(tr,tc,dr,dc,size){
	   var s,t1;
	   if(size==1)
	      return;
		t1=t++;
		s=size/2;
		var color=color_arr[t1%4];
		//-------------左上角子棋盘-----------------
        if(dr<tr+s&&dc<tc+s){
		    //特殊格子在右上角,递归处理子棋盘
			chessBoard(tr,tc,dr,dc,s);
		}else{ 
		    //处理右下角围绕分割点的棋盘
			//标记特殊棋盘
			$("table tr").eq(tr+s-1).find("td").eq(tc+s-1).css("background-color",color);
			chessBoard(tr,tc,tr+s-1,tc+s-1,s); 
		}
	    
		//--------------右上角棋盘-------------------
		if(dr>=tr+s&&dc<tc+s){
		   chessBoard(tr+s,tc,dr,dc,s);
		}else{
		    //左下角格子
		    $("table tr").eq(tr+s).find("td").eq(tc+s-1).css("background-color",color);
			chessBoard(tr+s,tc,tr+s,tc+s-1,s); 
		}
		//--------------左下角棋盘-------------------
		if(dr<tr+s&&dc>=tc+s){
		   chessBoard(tr,tc+s,dr,dc,s);
		}else{		    
		    $("table tr").eq(tr+s-1).find("td").eq(tc+s).css("background-color",color);
			chessBoard(tr,tc+s,tr+s-1,tc+s,s); 
		}
		//--------------右下角棋盘-------------------
		if(dr>=tr+s&&dc>=tc+s){
		   chessBoard(tr+s,tc+s,dr,dc,s);
		}else{		   
			//setTimeout("setColor("+tr+s+","+tc+s+",'"+color+"')",1000);
		    $("table tr").eq(tr+s).find("td").eq(tc+s).css("background-color",color);
			chessBoard(tr+s,tc+s,tr+s,tc+s,s); 
		}
        
	 }

	
  </script>
 </HEAD>
 <BODY style="text-align:center">
     <div>
	    级数:
	    <input type="text" id="txt_k"/>
        坐标X：
		<input type="text" id="txt_x"/>
        坐标Y:
		<input type="text" id="txt_y"/>
		<input type="button" id="btn" value="初始化表格" onclick="initTable()"/>
		<input type="button" id="btn" value="开始棋盘覆盖" onclick="calcTable()"/>
	 </div>
	 <div id='container' style="margin:0 auto;">
	 </div>
	 
 </BODY>
</HTML>